<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>应用</title>
		<script src="lib/react/react.development.js"></script>
		<script src="lib/react/react-dom.development.js"></script>
		<script src="lib/babel.min.js"></script>
	</head>
	<body>
		<div id="todos-example"></div>
		<script type="text/babel">
			class TodoApp extends React.Component {
				constructor(props) {
					super(props);
					this.state = { items: [], text: "" };
					this.handleChange = this.handleChange.bind(this);
					this.handleSubmit = this.handleSubmit.bind(this);
				}

				render() {
					return (
						<div>
							<h3>TODO</h3>
							<TodoList items={this.state.items} />
							<form onSubmit={this.handleSubmit}>
								<label htmlFor="new-todo">What needs to be done?</label>
								<input
									id="new-todo"
									onChange={this.handleChange}
									value={this.state.text}
								/>
								<button>Add #{this.state.items.length + 1}</button>
							</form>
						</div>
					);
				}

				handleChange(e) {
					this.setState({ text: e.target.value });
				}

				handleSubmit(e) {
					e.preventDefault();
					if (this.state.text.length === 0) {
						return;
					}
					const newItem = {
						text: this.state.text,
						id: Date.now(),
					};
					this.setState((state) => ({
						items: state.items.concat(newItem),
						text: "",
					}));
				}
			}

			class TodoList extends React.Component {
				render() {
					return (
						<ul>
							{this.props.items.map((item) => (
								<li key={item.id}>{item.text}</li>
							))}
						</ul>
					);
				}
			}

			ReactDOM.render(<TodoApp />, document.getElementById("todos-example"));
		</script>
	</body>
</html>
